<!--这是首页底部部分-->
<template>
    <div>
        <ul class="footer">
            <router-link tag="li" to="/index">

                <van-icon name="wap-home-o">
                    <p>首页</p>
                </van-icon>

            </router-link>
            <router-link tag="li" to="/index/HotList">
                <van-icon name="fire-o">
                    <p>热榜</p>

                </van-icon>
            </router-link>
            <router-link tag="li" to="/music">
                <van-icon name="music-o">
                    <p>音乐</p>
                </van-icon>
            </router-link>
            <router-link tag="li" to="/userInfo">
                <van-icon name="user-o">
                    <p>我的</p>
                </van-icon>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "Footer.vue"
    }
</script>

<style scoped lang="less">
    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eaeaea;
        background-color: #FFFFFF;
    }
    .footer li{
        width: calc(100% / 4);
        text-align: center;
        height: 45px;
        font-size: 22px;
        padding-top: 5px;
        /*line-height: 45px;*/

        background-color: #FFFFFF;
        p {
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
    }
    /*.footer li:hover{*/
    /*    cursor: pointer;*/
    /*    color: #409EFF;*/
    /*}*/

</style>